<template>
  <div>
    <!-- <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> -->

    <el-dialog title="订单信息" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column prop="id" label="订单编号" width="150"></el-table-column>
        <el-table-column prop="name" label="用户微信" width="100"></el-table-column>
        <el-table-column prop="phone" label="会员手机" width="120"></el-table-column>
        <el-table-column prop="classname" label="课程名称" width="150"></el-table-column>
        <el-table-column prop="money" label="订单金额(元)" width="120"></el-table-column>
        <el-table-column prop="state" label="订单状态" width="100">
          <template slot-scope="scope">{{typeObj[scope.row.state]}}</template>
        </el-table-column>
        <el-table-column prop="time" label="提交时间" width="150"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$parent.isShow=false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typeObj: {
        0: "待支付",
        1: "已关闭",
        2: "待确认",
        3: "学习中",
        4: "已完成"
      },
      gridData: [{}],
      dialogTableVisible: true
    };
  },
  watch: {
    dialogTableVisible() {
      this.dialogTableVisible = true;
      this.$parent.isShow = false;
    }
  }
};
</script>

<style lang='less' scoped>
/deep/.el-dialog {
  width: 1000px;
}
</style>